<template>
  <div class="trapezoid">课程中心</div>
</template>
<script setup>
import http from '@/utils/request.js'
import moment from 'moment'
import { useRouter } from 'vue-router'
const router = useRouter()
let curType = ref('Art')
let dataList = ref([])

onMounted(() => {
  getNews(curType.value)
})
moment.updateLocale('zh-cn', { longDateFormat: { ll: 'YYYY年M月D日' } })
let typeMap = new Map([
  ['All', null],
  ['Art', 1],
  ['Academic', 2],
  ['Leadership', 3],
])
function getNews(type) {
  curType.value = type
  const options = {
    method: 'POST',
    url: '/blogs/getBlogs',
    data: { page: 1, pageSize: 4, blogsType: typeMap.get(type) },
  }

  http.request(options).then((res) => {
    dataList.value = res.content.data
  })
}
function toList() {
  router.push({ name: 'event-list', params: { type: curType.value } })
}
function toDetail(id) {
  router.push({ name: 'detail', params: { id: id, type: curType.value } })
}
</script>



<style lang="scss" scoped>
.container {
  padding: 0 3rem;
  h2 {
    font-size: 34px;
    color: #000;
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 30px;
    text-transform: uppercase;
  }
  .course-content {
    padding: 10px 5px 5px 5px;
    text-align: center;
    min-height: 63px;
    h3 {
      font-size: 22px;
      color: #303030;
      text-transform: uppercase;
      font-weight: 700;
      font-family: 'Open Sans', sans-serif;
      margin-bottom: 10px;
    }
  }
}

.trapezoid {
  width: 150px;
  height: 45px;
  background-color: #96858f;
  position: relative;
  clip-path: polygon(0 15px, 15px 0, 100% 0, 100% 100%, 0 100%);
  margin: 60px auto;
  margin-bottom: 100px;
  justify-content: center;
  align-items: center;
  display: flex;
}
</style>